<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }

        .el-row {
            margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">系统首页</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
    <el-row :gutter="20">
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 17px">
                    <i class="el-icon-s-order" style="font-size: 25px;color: #66b1ff"></i>
                    <span>放款数</span>
                    <el-button style="float: right; padding: 3px 0;margin-right: 10px;margin-top: 7px" type="text">本月</el-button>
                    <el-button style="float: right; padding: 3px 0;margin-right: 15px;margin-top: 7px" type="text">今日</el-button>
                </div>
                <div class="text item" style="font-size: 25px" align="center">
                    <el-tag type="info">今日</el-tag>
                    1888
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 17px">
                    <i class="el-icon-s-finance" style="font-size: 25px;color: #85ce61"></i>
                    <span>放款金额</span>
                    <el-button style="float: right; padding: 3px 0;margin-right: 10px;margin-top: 7px" type="text">本月</el-button>
                    <el-button style="float: right; padding: 3px 0;margin-right: 15px;margin-top: 7px" type="text">今日</el-button>
                </div>
                <div class="text item" style="font-size: 25px" align="center">
                    <el-tag type="info">今日</el-tag>
                    ￥5432462
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 17px">
                    <i class="el-icon-s-grid" style="font-size: 25px;color: #ff2e59"></i>
                    <span>逾期笔数</span>
                    <el-button style="float: right; padding: 3px 0;margin-right: 10px;margin-top: 7px" type="text">本月</el-button>
                    <el-button style="float: right; padding: 3px 0;margin-right: 15px;margin-top: 7px" type="text">今日</el-button>
                </div>
                <div class="text item" style="font-size: 25px" align="center">
                    <el-tag type="info">今日</el-tag>
                    53
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 17px">
                    <i class="el-icon-document" style="font-size: 25px;color: #d477ff"></i>
                    <span>逾期金额</span>
                    <el-button style="float: right; padding: 3px 0;margin-right: 10px;margin-top: 7px" type="text">本月</el-button>
                    <el-button style="float: right; padding: 3px 0;margin-right: 15px;margin-top: 7px" type="text">今日</el-button>
                </div>
                <div class="text item" style="font-size: 25px" align="center">
                    <el-tag type="info">今日</el-tag>
                    ￥542467
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 18px">
                    <span>待处理事务</span>
                </div>
                <div class="text item" style="font-size: 15px" align="center">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div style="width: 70%;height: 25px;margin: auto;border-bottom: 1px gray solid">
                                <span style="float: left">待审核订单</span>
                                <span style="float: right;color: red;">155</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div style="width: 70%;height: 25px;margin: auto;border-bottom: 1px gray solid">
                                <span style="float: left">待放款订单</span>
                                <span style="float: right;color: red;">522</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div style="width: 70%;height: 25px;margin: auto;border-bottom: 1px gray solid">
                                <span style="float: left">待催收订单</span>
                                <span style="float: right;color: red;">87</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div style="width: 70%;height: 25px;margin: auto;border-bottom: 1px gray solid">
                                <span style="float: left">产品上线提醒</span>
                                <span style="float: right;color: red;">4</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div style="width: 70%;height: 25px;margin: auto;border-bottom: 1px gray solid">
                                <span style="float: left">产品下线提醒</span>
                                <span style="float: right;color: red;">8</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div style="width: 70%;height: 25px;margin: auto;border-bottom: 1px gray solid">
                                <span style="float: left">风控规则到期提醒</span>
                                <span style="float: right;color: red;">12</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 18px">
                    <span>快捷运营入口</span>
                </div>
                <div class="text item" style="height: 140px">
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-order" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">订单列表</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-data" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">渠道管理</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-custom" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">用户管理</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-home" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">贷后管理</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-marketing" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">风险管理</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-comment" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">消息管理</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-grid" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">运营管理</span></el-button></el-col>
                    <el-col :span="3">
                    <el-button type="primary" icon="el-icon-s-custom" plain style="width: 130px;height: 130px;font-size: 30px">
                        <br/><span style="font-size: 15px">权限管理</span></el-button></el-col>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 18px">
                    <span>贷款逾期总览</span>
                </div>
                <div class="text item">
                    <el-col :span="8">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">￥5035万</span><br/>
                            <span style="font-size: 14px;color: black">已结清</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">￥65万</span><br/>
                            <span style="font-size: 14px;color: black">逾期中</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">￥434万</span><br/>
                            <span style="font-size: 14px;color: black">逾期已还</span>
                        </div>
                    </el-col>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix" style="font-size: 18px">
                    <span>用户总览</span>
                </div>
                <div class="text item">
                    <el-col :span="6">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">28</span><br/>
                            <span style="font-size: 14px;color: black">今日新增</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">66</span><br/>
                            <span style="font-size: 14px;color: black">昨日新增</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">1934</span><br/>
                            <span style="font-size: 14px;color: black">本月新增</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div align="center" style="height: 100px">
                            <span style="font-size: 35px;color: red;line-height: 45px">6234</span><br/>
                            <span style="font-size: 14px;color: black">总用户</span>
                        </div>
                    </el-col>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>

<script th:inline="javascript">
    let app = new Vue({
        el:'#main',
        data:{

        },
        methods:{

        },
    //创建时执行查询，查第一页
    created : function () {

    }
    });
    let app2 = new Vue({
        el:"#top"
    });
</script>
</body>
</html>